<template>
  <view>
    <view class="popup-search">
      <u-button @click="askShowHistory" type="primary" :text="getTranslate(1)" class="history-button" size="small" v-if="type !== 'mobile'"></u-button>
      <u-search shape="square" :showAction="false" :placeholder="getTranslate(0)" v-model="searchContent"></u-search>
    </view>
    <view>
      <seg-content-group
          v-if="(device === 'desktop' && type === 'desktop') || (uniLeftMenuState.matchLeftWindow === true && type === 'desktop')">
        <!--   :style="{height: popUpInfo.height + 'px'}"  -->
        <scroll-view scroll-x scroll-y :style="{height: getHeight()}">
          <seg-content-choice-detail
              :head-info="getTranslateForDetail()"
              :line-info="getLine()" :type="type"
              @clickName="detailClick" @deleteName="detailDelete"
          ></seg-content-choice-detail>
        </scroll-view>
      </seg-content-group>
      <scroll-view v-else scroll-x scroll-y :style="{height: getHeightMobile()}">
        <seg-content-choice-detail
            :head-info="getTranslateForDetail()"
            :line-info="getLine()" :type="type"
            @clickName="detailClick" @deleteName="detailDelete"
        ></seg-content-choice-detail>
      </scroll-view>
    </view>

    <!-- 历史弹窗使用seg-content-choice-detail的改版，懒得封组建了，直接加   -->
    <view v-if="type !== 'mobile'">
      <seg-history-popup></seg-history-popup>
    </view>

  </view>
</template>

<script>
import UniSection from "../uni-section/uni-section";
import UniGroup from "../uni-group/uni-group";
import SegContentChoiceDetail from "../seg-content-choice-detail/seg-content-choice-detail";
import calCommon from "../../utils/winCal/calCommon";
import SegContentGroup from "../seg-content-group/seg-content-group";
import language from "../../api/language";
import SegHistoryPopup from "../seg-history-popup/seg-history-popup";
import appConfig from "../../api/appConfig";
import {mapActions, mapState} from "vuex";

export default {
  name: "segContentChoice",
  components: {SegHistoryPopup, SegContentGroup, SegContentChoiceDetail},
  props: {
    tableData: {
      default: {},
      type: Object
    },
    type: {
      default: 'desktop',  // 用于覆盖行为
      type: String
    }
  },
  mixins: [calCommon],
  computed: {
    ...mapState('componentCommunicate', ['clickHistory'])
  },
  mounted() {
    this.tableCal()
  },
  data(){
    return {
      searchContent: '',
      mode: appConfig.calMode
    }
  },
  methods: {
    ...mapActions({
      setClickHistory: 'componentCommunicate/setClickHistory'
    }),
    askShowHistory(){
      this.setClickHistory(!this.clickHistory)
    },
    getTranslate(posIndex){
      let langDict = language.getTranslate(language.segContentChoice)
      if (posIndex === 0){
        return langDict.pictureName
      }else if (posIndex === 1) {
        return langDict.history
      }
    },
    getTranslateForDetail(){
      let langDict = language.getTranslate(language.segContentChoiceDetail)
      return langDict.headInfo
    },
    getHeight(){
      return this.rightMenuInfo.height / 2 + 'px'
    },
    getHeightMobile(){
      return this.rightMenuInfo.height + 'px'
    },
    getLine(){
      if(this.searchContent === ''){
        return this.tableData.line
      }else{
        let line = []
        for(let i = 0; i < this.tableData.line.length; i++){
          let eachArray = this.tableData.line[i]
          // 注意数据结构的变化
          if(eachArray.name.search(this.searchContent) !== -1){
            line.push(eachArray)
          }
        }
        return line
      }
    },
    detailClick(name){
      this.$emit('show', name)
    },
    detailDelete(name){
      this.$emit('delete', name)
    }
  }
}
</script>

<style scoped>
  .popup-search-bar {
    width: 420px;
    margin-top: 35px;
    margin-bottom: 3%;
  }

  .popup-header {
    margin-top: 25px;
    margin-bottom: 10px;
  }
  .history-button {
    width: 20%;
    margin-right: 2%;
    margin-top: 2px;
  }

  .popup-search {
    display: flex;
    margin: 4% 3%;
    padding: 1% 0;  /* 这部分内容影像seg-tab-swiper的横向对齐 */
    /*background-color: white;*/
    /*border: 1px solid red*/
  }
</style>
